<template>
	<view class="account-list-content">
		<view class="edit-item">
			<text class="tit">姓名</text>
			<input class="desc uni-input" type="text" maxlength="30" placeholder="请输入真实姓名" name="name" value="" v-model="formData.realname" />
		</view>
		<view class="edit-item">
			<text class="tit">手机号</text>
			<input class="desc uni-input" type="number" maxlength="11" placeholder="请输入手机号" value="" v-model="formData.mobile" />
		</view>
		<view class="edit-item">
			<text class="tit">账号类型</text>
			<text class="desc uni-input" @click="showMulLinkageThreePicker()">{{ payment }}</text>
		</view>
		<view class="edit-item" v-if="subbranch">
			<text class="tit">支行信息</text>
			<input class="desc uni-input" type="text" maxlength="50" placeholder="请输入支行信息" value="" v-model="formData.branch_bank_name" />
		</view>
		<view class="edit-item" v-if="withdraw">
			<text class="tit">提现账号</text>
			<input class="desc uni-input" type="text" maxlength="30" placeholder="请输入提现账号" value="" v-model="formData.account_number" />
		</view>
		<button class="add" type="primary" @click="saveAccount">保存</button>
		<mpvue-picker
			ref="mpvuePicker"
			:mode="mode"
			:pickerValueDefault="pickerValueDefault"
			@onConfirm="onConfirm"
			@onCancel="onCancel"
			:pickerValueArray="pickerValueArray"
		></mpvue-picker>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import mpvuePicker from 'components/mpvue-picker/mpvuePicker.vue';
import validate from 'common/js/validate.js';
export default {
	components: {
		mpvuePicker
	},
	data() {
		return {
			withdraw: true,
			flag: false, //防重复标识
			subbranch: true,
			mode: 'selector',
			pickerValueDefault: [0],
			pickerValueArray: [],
			formData: {
				realname: '',
				mobile: '',
				account_type: '',
				account_number: '',
				branch_bank_name: ''
			},
			memberInfo: {},
			withdrawAccount: [],
			goback: '', // 返回页
			payment: '', //支付类型
			accountType: 0 //账户类型
		};
	},
	mixins: [http],
	onHide() {
		this.flag = false;
		this.pickerValueArray = [];
	},
	onLoad(option) {
		/* 修改头部信息 */
		let title = '新增账户';
		if (option.id) {
			title = '编辑账户';
			this.formData.id = option.id;
		}
		if (option.goback) this.goback = option.goback;
		uni.setNavigationBarTitle({
			title
		});
	},
	async onShow() {
		await this.paymentType();

		/* 初始化账户信息 */
		this.getAccountDetail(this.formData.id);
	},
	methods: {
		showMulLinkageThreePicker() {
			this.$refs.mpvuePicker.show();
		},
		/* 确定支付方式 */
		onConfirm(e) {
			this.payment = e.label;
			this.initAccount(e);
		},
		/* 取消选择支付方式 */
		onCancel(e) {
			this.pickerValueDefault = [0];
		},
		/* 获取账户信息 */
		getAccountDetail(id) {
			this.sendRequest({
				url: 'System.Member.accountDetail',
				data: { id: id },
				success: res => {
					if (res.code == 0) {
						this.formData.realname = res.data.realname;
						this.formData.mobile = res.data.mobile;
						this.payment = res.data.account_type_name;
						this.accountType = res.data.account_type;
						this.formData.account_number = res.data.account_number;
						this.formData.branch_bank_name = res.data.branch_bank_name;

						if (this.accountType == 1) {
							this.pickerValueDefault = [0];
						} else if (this.accountType == 1) {
							this.pickerValueDefault = [1];
						}

						this.initAccount({ value: this.accountType });
					}
				}
			});
		},

		saveAccount() {
			if (this.flag) return;
			this.flag = true;
			if (this.vertify()) {
				let ajax_url = !this.formData.id ? 'addAccount' : 'updateAccount',
					parmas = {
						id: this.formData.id,
						realname: this.formData.realname,
						mobile: this.formData.mobile,
						account_type: this.accountType,
						account_type_name: this.payment,
						account_number: this.formData.account_number,
						branch_bank_name: this.formData.branch_bank_name
					};
				this.sendRequest({
					url: 'System.Member.' + ajax_url,
					data: parmas,
					success: res => {
						if (res.code == 0 && res.data > 0) {
							if (this.goback) {
								var pages = getCurrentPages();
								for (let i = pages.length - 1; i > 0; i--) {
									if (this.goback == 'apply_withdrawal' && pages[i].route.indexOf('pages/member/apply_withdrawal/apply_withdrawal') > -1) {
										// 返回到余额提现
										uni.navigateBack({
											delta: 2
										});
										break;
									}
									if (this.goback == 'apply_withdrawal' && pages[i].route.indexOf('distributionpages/to_withdraw/to_withdraw') > -1) {
										// 返回到推广提现
										uni.navigateBack({
											delta: 2
										});
										break;
									}
								}
							} else {
								uni.navigateBack({
									delta: 1
								});
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
							this.flag = false;
						}
					}
				});
			}
		},
		vertify() {
			var rule = [
				{ name: 'realname', checkType: 'required', errorMsg: '请输入姓名' },
				{ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' },
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
			];

			if (this.accountType == 1) {
				rule.push(
					{ name: 'branch_bank_name', checkType: 'required', errorMsg: '请输入支行信息' },
					{ name: 'account_number', checkType: 'required', errorMsg: '请输入银行卡号' }
				);
			} else if (this.accountType == 3) {
				rule.push({ name: 'account_number', checkType: 'required', errorMsg: '请输入提现账号' });
			}

			var checkRes = validate.check(this.formData, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({ title: validate.error });
				this.flag = false;
				return false;
			}
		},
		async paymentType() {
			let res = await this.sendRequest({
				url: 'System.Config.balanceWithdraw',
				async: false
			});
			let _self = this;
			if (res.code == 0) {
				this.withdrawAccount = res.data.value.withdraw_account;
				this.withdrawAccount.forEach(function(value, item) {
					if (value.id == 'wechat') return false;
					let json = {};
					json.label = value.name;
					json.value = value.value;
					if (value.is_checked) _self.pickerValueArray.push(json);
				});
				if (this.pickerValueArray.length > 0) {
					this.payment = this.pickerValueArray[0].label;
					this.accountType = this.pickerValueArray[0].value;
					this.initAccount(this.pickerValueArray[0]);
				}
			}
		},
		initAccount(e) {
			let value = e.value instanceof Array ? e.value.join() : e.value;
			this.accountType = value;
			switch (Number(value)) {
				case 1:
					// 银行卡
					this.withdraw = true;
					this.subbranch = true;
					break;
				case 2:
					// 微信
					this.withdraw = false;
					this.subbranch = false;
					break;
				case 3:
					// 支付宝
					this.withdraw = true;
					this.subbranch = false;
					break;
			}
		}
	}
};
</script>

<style lang="scss">
page {
	overflow: hidden;
}
.account-list-content {
	.edit-item {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 100rpx;
		background-color: #fff;
		.tit {
			width: 120rpx;
			font-size: $uni-font-size-lg - 2rpx;
		}
		.desc {
			flex: 1;
			font-size: $uni-font-size-lg - 2rpx;
			margin-left: 20rpx;
			padding: 0;
		}
		&:first-of-type {
			margin-top: $uni-spacing-row-base;
		}
	}
}

.account-list-content > .edit-item + .edit-item {
	border-top: 2rpx solid $ns-border-color-gray;
}
.add {
	margin: 60rpx 30rpx 0;
}
</style>
